<html>
  <head>
    <title>Doom Fire Effect with CSS Grid</title>
    <style>
      :root{
        --color-0: rgb(7,7,7);
        --color-1: rgb(31,7,7);
        --color-2: rgb(47,15,7);
        --color-3: rgb(71,15,7);
        --color-4: rgb(87,23,7);
        --color-5: rgb(103,31,7);
        --color-6: rgb(119,31,7);
        --color-7: rgb(143,39,7);
        --color-8: rgb(159,47,7);
        --color-9: rgb(175,63,7);
        --color-10: rgb(191,71,7);
        --color-11: rgb(199,71,7);
        --color-12: rgb(223,79,7);
        --color-13: rgb(223,87,7);
        --color-14: rgb(223,87,7);
        --color-15: rgb(215,95,7);
        --color-16: rgb(215,95,7);
        --color-17: rgb(215,103,15);
        --color-18: rgb(207,111,15);
        --color-19: rgb(207,119,15);
        --color-20: rgb(207,127,15);
        --color-21: rgb(207,135,23);
        --color-22: rgb(199,135,23);
        --color-23: rgb(199,143,23);
        --color-24: rgb(199,151,31);
        --color-25: rgb(191,159,31);
        --color-26: rgb(191,159,31);
        --color-27: rgb(191,167,39);
        --color-28: rgb(191,167,39);
        --color-29: rgb(191,175,47);
        --color-30: rgb(183,175,47);
        --color-31: rgb(183,183,47);
        --color-32: rgb(183,183,55);
        --color-33: rgb(207,207,111);
        --color-34: rgb(223,223,159);
        --color-35: rgb(239,239,199);
        --color-36: rgb(255,255,255);
      }

      body {
        background-color: #63431c;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      h1 {
        font-family: impact;
        margin: 0;
        font-size: 35px;
        text-shadow: 0px -1px 0px rgba(255,225,31,0.4);
      }

      .pixel {
        height: 4px;
        width: 4px;
        border: 0;
      }

      a {
        color: #FFF;
        font-size: 10px;
        font-family: arial;
      }

      .margin {
        margin: 5px;
      }
    </style>

  </head>
  <body>
    <center>

      <h1>Doom Fire Effect with CSS Grid</h1>
      <a href="https://github.com/filipedeschamps/doom-fire-algorithm">https://github.com/filipedeschamps/doom-fire-algorithm</a>
      <div id="fireCanvas"></div>
      <div class="margin">
        <button onclick="decreaseFireSource()">-</button>
        <button onclick="destroyFireSource()">Min Fire</button>
        <button onclick="createFireSource()">Max Fire</button>
        <button onclick="increaseFireSource()">+</button>
      </div>
      <div class="margin">
      </div>
    </center>



    <div id="fireCanvas"></div>
    <script src="fire.js"></script>
  </body>
</html>